<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>物联网控制面板</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <style>
        /* 按钮状态样式：开启状态为绿色背景 */
        .btn.on { background-color: #4CAF50; color: white; }
        /* 按钮状态样式：关闭状态为红色背景 */
        .btn.off { background-color: #f44336; color: white; }
        /* 状态文本样式：开启状态为绿色文字 */
        .status.on { color: #4CAF50; }
        /* 状态文本样式：关闭状态为红色文字 */
        .status.off { color: #f44336; }
    </style>

    <script>
        // 全局设备状态对象：存储所有设备的开关状态（0=关闭，1=开启）
        const deviceStatus = {
            "flame": 0,        // 火焰设备状态
            "infrared": 0,     // 红外线设备状态
            "ozone": 0,        // 臭氧设备状态
            "ultraviolet": 0,  // 紫外线设备状态
            "fan": 0,          // 风扇设备状态
            "call": 0          // 呼叫设备状态
        };

        // 刷新传感器数据的函数
        function send(id) {
            var xhr = new XMLHttpRequest();     // 创建AJAX请求对象
            var url = "";                       // 请求的URL（需后端提供）
            console.log("请求ID:", id);
            
            xhr.open("POST", url, true);        // 配置请求：POST方法、异步请求
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) { // 请求成功完成
                    var response = JSON.parse(xhr.responseText);  // 解析JSON响应
                    console.log("响应数据:", response);
                    
                    // 更新传感器数据显示
                    const temperature = response.temperature;
                    const humidity = response.humidity;
                    const heart_rate = response.heart_rate;
                    document.getElementById("temperature").textContent = temperature;
                    document.getElementById("humidity").textContent = humidity;
                    document.getElementById("heart_rate").textContent = heart_rate;
                    document.getElementById("o2").textContent = o2;
                }
            };

            var sent_Params = {
					"msg": "get"
				};
            xhr.send(JSON.stringify(sent_Params));        // 发送请求
        }

        // 控制火焰设备的函数
        function flame(id) {
            // 切换火焰设备状态（0→1 或 1→0）
            deviceStatus.flame = deviceStatus.flame ? 0 : 1;
            
            // 更新按钮样式，反映当前设备状态
            document.getElementById("flame-on").classList.toggle("on", deviceStatus.flame);
            document.getElementById("flame-on").classList.toggle("off", !deviceStatus.flame);
            document.getElementById("flame-off").classList.toggle("on", !deviceStatus.flame);
            document.getElementById("flame-off").classList.toggle("off", deviceStatus.flame);
            
            // 更新状态文本显示
            document.getElementById("flame-status").classList.toggle("on", deviceStatus.flame);
            document.getElementById("flame-status").classList.toggle("off", !deviceStatus.flame);
            document.getElementById("flame-value").textContent = deviceStatus.flame ? "开启" : "关闭";
            
            // 发送AJAX请求控制设备
            var xhr = new XMLHttpRequest();
            var url = "";
            console.log("控制火焰设备:", id);
            xhr.open("POST", url, true);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var response = JSON.parse(xhr.responseText);
                    console.log("火焰设备响应:", response);
                    document.getElementById("flame").innerHTML = response;
                }
            };
            
            // 构建符合要求的JSON请求参数
            var flameParams = {
                "msg": "set",             // 请求类型
                "flame": deviceStatus.flame,  // 设备名称和状态
                "infrared": deviceStatus.infrared,
                "ozone": deviceStatus.ozone,
                "ultraviolet": deviceStatus.ultraviolet,
                "call": deviceStatus.call,
                "fan": deviceStatus.fan
            };
            xhr.send(JSON.stringify(flameParams));  // 发送JSON格式的请求
        }

        // 控制红外线设备的函数（逻辑与火焰设备相同）
        function infrared(id) {
            deviceStatus.infrared = deviceStatus.infrared ? 0 : 1;
            
            document.getElementById("infrared-on").classList.toggle("on", deviceStatus.infrared);
            document.getElementById("infrared-on").classList.toggle("off", !deviceStatus.infrared);
            document.getElementById("infrared-off").classList.toggle("on", !deviceStatus.infrared);
            document.getElementById("infrared-off").classList.toggle("off", deviceStatus.infrared);
            
            document.getElementById("infrared-status").classList.toggle("on", deviceStatus.infrared);
            document.getElementById("infrared-status").classList.toggle("off", !deviceStatus.infrared);
            document.getElementById("infrared-value").textContent = deviceStatus.infrared ? "开启" : "关闭";
            
            var xhr = new XMLHttpRequest();
            var url = "";
            console.log("控制红外线设备:", id);
            xhr.open("POST", url, true);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var response = JSON.parse(xhr.responseText);
                    console.log("红外线设备响应:", response);
                    document.getElementById("infrared").innerHTML = response;
                }
            };
            
            var infraredParams = {
                "msg": "set",             // 请求类型
                "flame": deviceStatus.flame,  // 设备名称和状态
                "infrared": deviceStatus.infrared,
                "ozone": deviceStatus.ozone,
                "ultraviolet": deviceStatus.ultraviolet,
                "call": deviceStatus.call,
                "fan": deviceStatus.fan
            };
            xhr.send(JSON.stringify(infraredParams));
        }

        // 控制臭氧设备的函数（逻辑与火焰设备相同）
        function ozone(id) {
            deviceStatus.ozone = deviceStatus.ozone ? 0 : 1;
            
            document.getElementById("ozone-on").classList.toggle("on", deviceStatus.ozone);
            document.getElementById("ozone-on").classList.toggle("off", !deviceStatus.ozone);
            document.getElementById("ozone-off").classList.toggle("on", !deviceStatus.ozone);
            document.getElementById("ozone-off").classList.toggle("off", deviceStatus.ozone);
            
            document.getElementById("ozone-status").classList.toggle("on", deviceStatus.ozone);
            document.getElementById("ozone-status").classList.toggle("off", !deviceStatus.ozone);
            document.getElementById("ozone-value").textContent = deviceStatus.ozone ? "开启" : "关闭";
            
            var xhr = new XMLHttpRequest();
            var url = "";
            console.log("控制臭氧设备:", id);
            xhr.open("POST", url, true);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var response = JSON.parse(xhr.responseText);
                    console.log("臭氧设备响应:", response);
                    document.getElementById("ozone").innerHTML = response;
                }
            };
            
            var ozoneParams = {
                "msg": "set",             // 请求类型
                "flame": deviceStatus.flame,  // 设备名称和状态
                "infrared": deviceStatus.infrared,
                "ozone": deviceStatus.ozone,
                "ultraviolet": deviceStatus.ultraviolet,
                "call": deviceStatus.call,
                "fan": deviceStatus.fan
            };
            xhr.send(JSON.stringify(ozoneParams));
        }

        // 控制紫外线设备的函数（逻辑与火焰设备相同）
        function ultraviolet(id) {
            deviceStatus.ultraviolet = deviceStatus.ultraviolet ? 0 : 1;
            
            document.getElementById("ultraviolet-on").classList.toggle("on", deviceStatus.ultraviolet);
            document.getElementById("ultraviolet-on").classList.toggle("off", !deviceStatus.ultraviolet);
            document.getElementById("ultraviolet-off").classList.toggle("on", !deviceStatus.ultraviolet);
            document.getElementById("ultraviolet-off").classList.toggle("off", deviceStatus.ultraviolet);
            
            document.getElementById("ultraviolet-status").classList.toggle("on", deviceStatus.ultraviolet);
            document.getElementById("ultraviolet-status").classList.toggle("off", !deviceStatus.ultraviolet);
            document.getElementById("ultraviolet-value").textContent = deviceStatus.ultraviolet ? "开启" : "关闭";
            
            var xhr = new XMLHttpRequest();
            var url = "";
            console.log("控制紫外线设备:", id);
            xhr.open("POST", url, true);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var response = JSON.parse(xhr.responseText);
                    console.log("紫外线设备响应:", response);
                    document.getElementById("ultraviolet").innerHTML = response;
                }
            };
            
            var ultravioletParams = {
                "msg": "set",             // 请求类型
                "flame": deviceStatus.flame,  // 设备名称和状态
                "infrared": deviceStatus.infrared,
                "ozone": deviceStatus.ozone,
                "ultraviolet": deviceStatus.ultraviolet,
                "call": deviceStatus.call,
                "fan": deviceStatus.fan
            };
            xhr.send(JSON.stringify(ultravioletParams));
        }

        // 控制风扇设备的函数（逻辑与火焰设备相同）
        function fan(id) {
            deviceStatus.fan = deviceStatus.fan ? 0 : 1;
            
            document.getElementById("fan-on").classList.toggle("on", deviceStatus.fan);
            document.getElementById("fan-on").classList.toggle("off", !deviceStatus.fan);
            document.getElementById("fan-off").classList.toggle("on", !deviceStatus.fan);
            document.getElementById("fan-off").classList.toggle("off", deviceStatus.fan);
            
            document.getElementById("fan-status").classList.toggle("on", deviceStatus.fan);
            document.getElementById("fan-status").classList.toggle("off", !deviceStatus.fan);
            document.getElementById("fan-value").textContent = deviceStatus.fan ? "开启" : "关闭";
            
            var xhr = new XMLHttpRequest();
            var url = "";
            console.log("控制风扇设备:", id);
            xhr.open("POST", url, true);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var response = JSON.parse(xhr.responseText);
                    console.log("风扇设备响应:", response);
                    document.getElementById("fan").innerHTML = response;
                }
            };
            
            var fanParams = {
                "msg": "set",             // 请求类型
                "flame": deviceStatus.flame,  // 设备名称和状态
                "infrared": deviceStatus.infrared,
                "ozone": deviceStatus.ozone,
                "ultraviolet": deviceStatus.ultraviolet,
                "call": deviceStatus.call,
                "fan": deviceStatus.fan
            };
            xhr.send(JSON.stringify(fanParams));
        }

        // 控制呼叫设备的函数（逻辑与火焰设备相同）
        function call(id) {
            deviceStatus.call = deviceStatus.call ? 0 : 1;
            
            document.getElementById("call-on").classList.toggle("on", deviceStatus.call);
            document.getElementById("call-on").classList.toggle("off", !deviceStatus.call);
            document.getElementById("call-off").classList.toggle("on", !deviceStatus.call);
            document.getElementById("call-off").classList.toggle("off", deviceStatus.call);
            
            document.getElementById("call-status").classList.toggle("on", deviceStatus.call);
            document.getElementById("call-status").classList.toggle("off", !deviceStatus.call);
            document.getElementById("call-value").textContent = deviceStatus.call ? "开启" : "关闭";
            
            var xhr = new XMLHttpRequest();
            var url = "";
            console.log("控制呼叫设备:", id);
            xhr.open("POST", url, true);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var response = JSON.parse(xhr.responseText);
                    console.log("呼叫设备响应:", response);
                    document.getElementById("call").innerHTML = response;
                }
            };
            
            var callParams = {
                "msg": "set",             // 请求类型
                "flame": deviceStatus.flame,  // 设备名称和状态
                "infrared": deviceStatus.infrared,
                "ozone": deviceStatus.ozone,
                "ultraviolet": deviceStatus.ultraviolet,
                "call": deviceStatus.call,
                "fan": deviceStatus.fan
            };
            xhr.send(JSON.stringify(callParams));
        }
    </script>
</head>

<body>
    <div class="background-overlay"></div>
    <div class="container">
        <h1><i class="material-icons">settings_input_antenna</i> 控制面板</h1>

        <div class="dashboard">
            <!-- 传感器数据显示区域 -->
            <div class="data-block">
                <div class="block-header">
                    <h2><i class="material-icons">sensors</i> 传感器数据</h2>
                    <button id="refresh" class="refresh-btn" onclick="send(id)">
                        <i class="material-icons">refresh</i> 刷新数据
                    </button>
                </div>
                <div class="sensor-grid">
                    <!-- 温度传感器显示卡片 -->
                    <div class="sensor-item">
                        <div class="sensor-icon">
                            <i class="material-icons">thermostat</i>
                        </div>
                        <div class="sensor-info">
                            <h3>温度传感器</h3>
                            <div class="sensor-value">
                                <span id="temperature">--</span>
                                <span class="unit">°C</span>
                            </div>
                        </div>
                    </div>

                    <!-- 湿度传感器显示卡片 -->
                    <div class="sensor-item">
                        <div class="sensor-icon">
                            <i class="material-icons">grain</i>
                        </div>
                        <div class="sensor-info">
                            <h3>湿度传感器</h3>
                            <div class="sensor-value">
                                <span id="humidity">--</span>
                                <span class="unit">%</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 心率传感器显示卡片 -->
                    <div class="sensor-item">
                        <div class="sensor-icon">
                            <i class="material-icons">thermometer</i>
                        </div>
                        <div class="sensor-info">
                            <h3>心率传感器</h3>
                            <div class="sensor-value">
                                <span id="heart_rate">--</span>
                                <span class="unit">次/分</span>
                            </div>
                        </div>
                    </div>

                    <!-- 血氧传感器显示卡片 -->
                    <div class="sensor-item">
                        <div class="sensor-icon">
                            <i class="material-icons">thermostat</i>
                        </div>
                        <div class="sensor-info">
                            <h3>血氧传感器</h3>
                            <div class="sensor-value">
                                <span id="o2">--</span>
                                <span class="unit">%</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 设备控制区域 -->
            <div class="control-block">
                <div class="block-header">
                    <h2><i class="material-icons">build</i> 设备控制</h2>
                </div>
                <div class="control-grid">
                    <!-- 火焰设备控制卡片 -->
                    <div class="control-item">
                        <div class="device-icon">
                            <i class="material-icons">lightbulb</i>
                        </div>
                        <div class="device-control">
                            <h3>火焰</h3>
                            <div class="control-buttons">
                                <button id="flame-on" class="btn off" onclick="flame(id)">开启</button>
                                <button id="flame-off" class="btn on" onclick="flame(id)">关闭</button>
                            </div>
                            <div class="status" id="flame-status">
                                <i class="material-icons">info</i> 状态: <span id="flame-value">关闭</span>
                            </div>
                        </div>
                    </div>

                    <!-- 红外线设备控制卡片 -->
                    <div class="control-item">
                        <div class="device-icon">
                            <i class="material-icons">remote</i>
                        </div>
                        <div class="device-control">
                            <h3>红外线</h3>
                            <div class="control-buttons">
                                <button id="infrared-on" class="btn off" onclick="infrared(id)">开启</button>
                                <button id="infrared-off" class="btn on" onclick="infrared(id)">关闭</button>
                            </div>
                            <div class="status" id="infrared-status">
                                <i class="material-icons">info</i> 状态: <span id="infrared-value">关闭</span>
                            </div>
                        </div>
                    </div>

                    <!-- 臭氧设备控制卡片 -->
                    <div class="control-item">
                        <div class="device-icon">
                            <i class="material-icons">cloud</i>
                        </div>
                        <div class="device-control">
                            <h3>臭氧</h3>
                            <div class="control-buttons">
                                <button id="ozone-on" class="btn off" onclick="ozone(id)">开启</button>
                                <button id="ozone-off" class="btn on" onclick="ozone(id)">关闭</button>
                            </div>
                            <div class="status" id="ozone-status">
                                <i class="material-icons">info</i> 状态: <span id="ozone-value">关闭</span>
                            </div>
                        </div>
                    </div>

                    <!-- 紫外线设备控制卡片 -->
                    <div class="control-item">
                        <div class="device-icon">
                            <i class="material-icons">wb_sunny</i>
                        </div>
                        <div class="device-control">
                            <h3>紫外线</h3>
                            <div class="control-buttons">
                                <button id="ultraviolet-on" class="btn off" onclick="ultraviolet(id)">开启</button>
                                <button id="ultraviolet-off" class="btn on" onclick="ultraviolet(id)">关闭</button>
                            </div>
                            <div class="status" id="ultraviolet-status">
                                <i class="material-icons">info</i> 状态: <span id="ultraviolet-value">关闭</span>
                            </div>
                        </div>
                    </div>

                    <!-- 风扇设备控制卡片 -->
                    <div class="control-item">
                        <div class="device-icon">
                            <i class="material-icons">air</i>
                        </div>
                        <div class="device-control">
                            <h3>风扇</h3>
                            <div class="control-buttons">
                                <button id="fan-on" class="btn off" onclick="fan(id)">开启</button>
                                <button id="fan-off" class="btn on" onclick="fan(id)">关闭</button>
                            </div>
                            <div class="status" id="fan-status">
                                <i class="material-icons">info</i> 状态: <span id="fan-value">关闭</span>
                            </div>
                        </div>
                    </div>

                    <!-- 呼叫设备控制卡片 -->
                    <div class="control-item">
                        <div class="device-icon">
                            <i class="material-icons">phone</i>
                        </div>
                        <div class="device-control">
                            <h3>呼叫</h3>
                            <div class="control-buttons">
                                <button id="call-on" class="btn off" onclick="call(id)">开启</button>
                                <button id="call-off" class="btn on" onclick="call(id)">关闭</button>
                            </div>
                            <div class="status" id="call-status">
                                <i class="material-icons">info</i> 状态: <span id="call-value">关闭</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script src="script.js"></script>
</body>

</html>